<template>
  <div class="user-info">
    <el-descriptions class="margin-top" title="With border" :column="3" :size="size" border>
      <template #extra>
        <el-button type="primary">Operation</el-button>
      </template>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            用户
          </div>
        </template>
        kooriookami
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <iphone />
            </el-icon>
            手机号
          </div>
        </template>
        18100000000
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <location />
            </el-icon>
            当前用户登录地址
          </div>
        </template>
        Suzhou
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            备注
          </div>
        </template>
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <office-building />
            </el-icon>
            居住地
          </div>
        </template>
        No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
      </el-descriptions-item>
    </el-descriptions>
    <div>
      <el-upload class="upload-demo" action="">
        <el-button type="primary" @click="uploadFile">Click to upload</el-button>
        <template #tip>
          <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
        </template>
      </el-upload>
    </div>
    <div class="table-data">
      <el-table
        :data="tableData"
        :row-height="50"
        :virtul-scroll="true"
        style="width: 1200px"
        ref="dataRef"
        class="data-table"
        :setScrollTop="200"
        border
      >
        <el-table-column prop="_id" label="文件编号" min-width="200px"></el-table-column>
        <el-table-column prop="文件名称" label="file_name" min-width="200px"></el-table-column>
        <el-table-column prop="file_size" label="文件大小" min-width="200px"></el-table-column>
        <el-table-column prop="description" label="文件简介" min-width="200px"></el-table-column>
        <el-table-column prop="upload_date" label="创建日期" min-width="200px"></el-table-column>
        <el-table-column prop="uploader" label="上传人" min-width="200px"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from 'vue'
import { Iphone, Location, OfficeBuilding, Tickets, User } from '@element-plus/icons-vue'
import { queryFilesData, uploadFiles } from '@/api/files/files'
import { UploadFilled } from '@element-plus/icons-vue'
import COS from 'cos-js-sdk-v5'

const state = reactive({
  upload_date: '',
  uploader: '',
  remote_address: '',
  file_name: '',
  description: '',
  tags: []
})
const { upload_date, uploader, remote_address, file_name, description, tags } = toRefs(state)
// 查询文件列表
const getFilesData = async () => {
  const { data } = await queryFilesData({ ...state })
  tableData.value = data.list
}
getFilesData()
const size = ref('default')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px'
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default
  }
})
const tableData = ref([])
const blockMargin = computed(() => {
  const marginMap = {
    large: '32px',
    default: '28px',
    small: '24px'
  }
  return {
    marginTop: marginMap[size.value] || marginMap.default
  }
})
const selectedFile = ref(null)

const handleFileChange = (event) => {
  selectedFile.value = event.target.files[0]
}

const uploadFile = async (value) => {
  const formData = new FormData()
  formData.append('file', selectedFile.value)

  try {
    await uploadFiles(formData)
    alert('文件上传成功！')
  } catch (error) {
    console.error('文件上传失败:', error)
  }
}
</script>

<style lang="scss" scoped>
.user-info {
  padding: 16px;
  box-sizing: border-box;
  .el-descriptions {
    margin-top: 20px;
  }
  .cell-item {
    display: flex;
    align-items: center;
  }
  .margin-top {
    margin-top: 20px;
  }
  .table-data {
    margin-top: 30px;
  }
}
</style>
